<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <div class="col-9">
            <!-- 标题及作者 -->
            <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者：{{ article.author }}
    {#            · <a href="#" onclick="confirm_delete()">删除文章</a>#}
                {% if user == article.author %}
                    · <a href="#" onclick="confirm_safe_delete()">删除文章</a>
                    · <a href="{% url "article:article_update" article.id %}">编辑文章</a>
                {% endif %}
            </div>
            <div>
                浏览：{{ article.total_views }}
            </div>
            <!-- 文章正文 -->
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>

            <!-- 新增一个隐藏的表单 -->
            <form
                    style="display:none;"
                    id="safe_delete"
                    action="{% url 'article:article_safe_delete' article.id %}"
                    method="POST"
            >
                {% csrf_token %}
                <button type="submit">发送</button>
            </form>

        <!-- 发表评论 -->
            <hr>
            {% if user.is_authenticated %}
                <div>
                    <form
                        action="{% url 'comment:post_comment' article.id %}"
                        method="POST"
                    >
                    {% csrf_token %}
                        <div class="form-group">
                            <label for="body">
                                <strong>
                                    我也要发言：
                                </strong>
                            </label>
{#                            <textarea#}
{#                                type="text"#}
{#                                class="form-control"#}
{#                                id="body"#}
{#                                name="body"#}
{#                                rows="2"></textarea>#}
                            <div>
                                {{ comment_form.media }}
                                {{ comment_form.body }}
                            </div>
                        </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">发送</button>
                    </form>
                </div>
                <br>
            {% else %}
                <br>
                <h5 class="row justify-content-center">
                    请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                </h5>
                <br>
            {% endif %}



            <!-- 显示评论 -->
            {% load mptt_tags %}
            <h4>共有{{ comments.count }}条评论</h4>
            <div class="row">
                <!-- 遍历树形结构 -->
                {% recursetree comments %}
                    <!-- 给 node 取个别名 comment -->
                    {% with comment=node %}
                        <div class="{% if comment.reply_to %}
                                    offset-1 col-11
                                    {% else %}
                                    col-12
                                    {% endif %}"
                        >
                            <hr>
                            <p>
                                <strong style="color: pink">
                                    {{ comment.user }}
                                </strong>

                                {% if comment.reply_to %}
                                    <i class="far fa-arrow-alt-circle-right"
                                       style="color: cornflowerblue;"
                                    ></i>
                                    <strong style="color: pink">
                                        {{ comment.reply_to }}
                                    </strong>
                                {% endif %}

                            </p>
                            <div>{{ comment.body|safe }}</div>

                            <div>
                                <span style="color: gray">
                                    {{ comment.created|date:"Y-m-d H:i" }}
                                </span>

                                <!-- 加载 modal 的按钮 -->
                                {% if user.is_authenticated %}
                                <button type="button"
                                        class="btn btn-light btn-sm text-muted"
                                        onclick="load_modal({{ article.id }}, {{ comment.id }})"
                                        >
                                    回复
                                </button>
                                {% else %}
                                <a class="btn btn-light btn-sm text-muted"
                                   href="{% url 'userprofile:login' %}"
                                   >
                                    回复
                                </a>
                                {% endif %}
                            </div>

                            <!-- Modal -->
                            <div class="modal fade"
                                 id="comment_{{ comment.id }}"
                                 tabindex="-1"
                                 role="dialog"
                                 aria-labelledby="CommentModalCenter"
                                 aria-hidden="true"
                            >
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content" style="height: 480px">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalCenterTitle">回复 {{ comment.user }}：</h5>
                                        </div>
                                        <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
                                    </div>

                                </div>
                            </div>

                            {% if not comment.is_leaf_node %}
                                <div class="children">
                                    {{ children }}
                                </div>
                            {% endif %}
                        </div>


                    {% endwith %}
                {% endrecursetree %}
            </div>
        </div>

        <!-- 新增的目录 -->
{#        <div class="col-3 mt-4">#}
{#            <h4><strong>目录</strong></h4>#}
{#            <hr>#}
{#            <div>#}
{#                {{ toc|safe }}#}
{#            </div>#}
{#        </div>#}
        <!-- 目录 -->
        <div id="sidebar" class="sidebar">
            <div class="sidebar__inner">
                <h4><strong>目录</strong></h4>
                <hr>
                <div>
                    {{ toc|safe }}
                </div>
            </div>
        </div>
        <!-- 粘性侧边栏样式 -->
        <style>
            .sidebar{
                will-change: min-height;
            }

            .sidebar__inner{
                transform: translate(0, 0);
                transform: translate3d(0, 0, 0);
                will-change: position, transform;
            }
        </style>
    </div>
</div>
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">
<script>
// 删除文章的函数
    {#function confirm_delete() {#}
    {#    // 调用layer弹窗组件#}
    {#    layer.open({#}
    {#        // 弹窗标题#}
    {#        title: "确认删除",#}
    {#        // 正文#}
    {#        content: "确认删除这篇文章吗？",#}
    {#        // 点击确定按钮后调用的回调函数#}
    {#        yes: function(index, layero) {#}
    {#            // 指定应当前往的 url#}
    {#            location.href='{% url "article:article_delete" article.id %}'#}
    {#        },#}
    {#    })#}
    function confirm_safe_delete() {
    layer.open({
        title: "确认删除",
        content: "确认删除这篇文章吗？",
        yes: function(index, layero) {
            $('form#safe_delete button').click();
            layer.close(index);
        }
    })
}
</script>

{% endblock content %}

{% block script %}
        <!-- 引入粘性侧边栏 -->
    <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
    <script type="text/javascript">
        $('#sidebar').stickySidebar({
            topSpacing: 20,
            bottomSpacing: 20,
        });
    </script>
    <script>
        $(".django-ckeditor-widget").removeAttr('style');
    </script>
    <script>
        // 加载 modal
        function load_modal(article_id, comment_id) {
            let modal_body = '#modal_body_' + comment_id;
            let modal_id = '#comment_' + comment_id;

            // 加载编辑器
            if ($(modal_body).children().length === 0) {
                let content = '<iframe src="/comment/post_comment/' +
                    article_id +
                    '/' +
                    comment_id +
                    '"' +
                    ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
                    comment_id +
                    '"></iframe>';
                $(modal_body).append(content);
            };

            $(modal_id).modal('show');
        }
    </script>
{% endblock script %}